<template>
  <div class="box">
    <div class="top">
        饿了么
    </div>
    <ul>
        <li v-for="(v,i) in arr" :key="i">{{v}}</li>
    </ul>
    <div class="goods" v-for="(v,i) in arr2" :key="i">
       <div class="title">
         <h3>{{v.shop}}</h3>
         <span>已送达</span>
       </div>
        <div class="info">
            <div class="imgbox">
                <img :src="v.img" alt="">
                <img :src="v.imgs" alt="">
            </div>
            <div class="price">
                <span>￥{{v.price}}</span>
                <p>共{{v.num}}件</p>
                <span class="come">再来一单</span>
            </div>
           
        </div>
        
    </div>
     
  </div>
</template>

<script>
var img1="https://img2.baidu.com/it/u=1291502012,1086762189&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
var img2="https://img2.baidu.com/it/u=1359671253,2640038450&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
var img3="http://t13.baidu.com/it/u=1646905142,1756179589&fm=224&app=112&f=JPEG?w=500&h=500"
export default {
    data(){
        return{
            arr:["全部","待消费","待评价","退款"],
            arr2:[
                {img:img1,imgs:img2,shop:"汉堡王 用心火烤 肉质紧实",info:"",price:25,text:"马上抢",num:9029},
                {img:img2,imgs:img3,shop:"华莱士·全鸡汉堡 ",info:"华莱士 | 聚划算单人套餐 ",price:12.12,text:"马上抢",num:173},
                {img:img3,imgs:img1,shop:"贡天下山西特产",info:"白老大小米果仁酥220g 【爆爆团】",price:18.8,text:"马上抢",num:666}
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
.box{
    padding: 15px 10px;
    box-sizing: border-box;
    background-color: lightslategray;
    .top{
        text-align: center;
    }
    >ul{
        margin-top: 10px;
        display: flex;
        >li{
            padding: 5px 20px 5px 0;
            font-weight: bold;
        }
    }
    .goods{
        background-color: #fff;
        padding: 10px 0;
        .title{
            display: flex;
            justify-content: space-between;
            align-items: center;
            >span{
                margin-right: 10px;
            }
        }
        .info{
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 12px;
            .imgbox{
                width: 150px;
                >img{
                    width: 70px;
                    height: 70px;
                }
            }
        }
        .price{
            text-align: center;
            >p{
                margin: 8px 0;
                font-size: 14px;
            }
        }
          .come{
            margin-top: 20px;
            display: block;
            padding: 5px 15px;
            border-radius: 20px;
            color: skyblue;
            border:1px solid skyblue
        }
        
        
    }
}
</style>